<template>
    <div id="searchBox">
        <el-form ref="dataFormRef" :inline="true" :model="dataForm" class="demo-form-inline" :label-width="labelWidth"
            v-bind="$attrs">
            <el-row>
                <el-col :span="24" v-if="useAdd === true">
                    <template v-for="(item, index) in newFormInline" :key="index">
                      <el-form-item>
                          <el-select v-model="item.name" filterable placeholder="筛选条件"
                              style="width:100px;margin-right:10px;">
                              <el-option v-for="(item2) in searchOptions" :key="item2.value" :label="item2.label"
                                  :value="item2.value"
                                  :disabled="newFormInline.findIndex((item) => item.name === item2.value) > -1"
                                  placeholder="请选择筛选条件" />
                          </el-select>
                          <div class="el-new-input">
                              <el-input v-model="item.value" placeholder="请输入值" clearable />
                          </div>
                          <el-button type="primary" :icon="Delete" @click="deleteSearchForm(index)"
                              style="border-radius: 0px 4px 4px 0px;"></el-button>
                      </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button type="primary" plain @click="addSearchForm">添加新的筛选+</el-button>
                    </el-form-item>
                    <div style="display: flex;margin-bottom: 18px">
                      <el-button type="primary" @click="search" :icon="Search">{{ okBtnText }}</el-button>
                      <el-button @click="resetForm(dataFormRef)">{{ cancelBtnText }}</el-button>
                    </div>
                </el-col>
                <el-col :span="24" v-else>
                  <el-row style="width: 100%" :gutter="10">
                    <el-col v-for="(item, index) in slotsList" :key="index" v-bind="colProps">
                      <component :is="item"/>
                    </el-col>
                    <el-col style="display: flex;margin-bottom: 18px;flex-wrap:nowrap" v-bind="colProps">
                      <el-button type="primary" @click="search" :icon="Search">{{ okBtnText }}</el-button>
                      <el-button @click="resetForm(dataFormRef)">{{ cancelBtnText }}</el-button>
                    </el-col>
                  </el-row>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script setup>
import { Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, reactive, getCurrentInstance,  computed} from 'vue'
import {Search} from '@element-plus/icons-vue'

const instance = getCurrentInstance()
const slotsList = computed(() => {
  const list = instance.proxy.$slots.default()
  return list.filter(item => item.props)
})
defineOptions({ name: 'SearchForm', autoImport: true })
const props = defineProps({
    dataForm: {
        type: Object,
        default: () => {
        }
    },
    useAdd: {
        type: Boolean,
        default: false
    },
    searchOptions: {
        type: Array,
        default: () => []
    },
    labelWidth: {
        type: String,
        default: '100px'
    },
    okBtnText: {
        type: String,
        default: "查询"
    },
    cancelBtnText: {
        type: String,
        default: "重置"
    },
    cancelHandel: {
        type: Object,
        default: null
    },
    colProps: {
      type: Object,
      default: () => {
        return {
          sm: 8,
          md: 6,
          lg: 6,
          xl: 4,
        }
      }
    }
})

const emit = defineEmits(['update:url', 'on-search', 'on-reset'])
const formInline = reactive(props.dataForm)
const newFormInline = ref([])


const search = () => {
    if (props.useAdd === true) {
        const newObj = {}
        newFormInline.value.forEach((item) => {
            newObj[item.name] = item.value
        });
        formInline.value = newObj
    }
    console.log(formInline)
    emit('on-search', formInline)
}
const dataFormRef = ref(null)
const resetForm = () => {
    if (typeof props.cancelHandel == "function") {
        return props.cancelHandel()
    }
    dataFormRef.value.resetFields()
    emit('on-reset')
}
const mySlot = ref(null)
const addSearchForm = () => {
    if (props.searchOptions.length > newFormInline.value.length) {
        newFormInline.value.push({
            name: '',
            value: ''
        })
    } else {
        ElMessage({
            type: 'error',
            message: '最多添加' + props.searchOptions.length + '条查询条件'
        });
    }
}
const deleteSearchForm = (index) => {
    newFormInline.value.splice(index, 1)
}

</script>
<style lang="scss">
.demo-form-inline {
    .el-new-input {
        .el-input__inner {
            border-radius: 4px 0px 0px 4px;
        }
    }
}
#searchBox{
  margin-bottom: 18px;
  border-bottom: 1px solid #f0f0f0;
  .el-cascader{
    width: 100%!important;
  }
  .el-form-item{
    margin-right: 0;
    width: 100%;
  }
  .el-form-item__content {
      // width: 220px;
      &>.el-input {
        width: 100%;
        // min-width: 180px;
      }
      &>.el-select {
        // min-width: 180px;
        width: 100%;
      }
      .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
        // min-width: 370px;
        width: 100%!important;
      }
    }
  .el-input__wrapper{
    border-radius: 0px;
  }
  .el-button{
    border-radius: 0px;
  }
  .el-col-24{
    display: flex;
    flex-wrap: wrap;
  }
}
</style>

